<template>
  <div class="main-container">
    <div class="main-header">
      <div class="main-header-top">
        <img :src="shopdata.pics ? shopdata.pics[0] : ''" alt="" />
      </div>
      <div class="main-header-bottom">
        <img @click="showoverlay = true" :src="shopdata.avatar" />
        <h3>{{ shopdata.name }}</h3>
      </div>
    </div>

    <van-overlay :show="showoverlay">
      <div>
        <van-icon @click="showoverlay = false" size="50" color="#fff" name="cross" />
        <h2 v-for="item in shopdata.supports" :key="item">{{ item }}</h2>
      </div>
    </van-overlay>

    <div class="main-body">
      <div class="main-nav">
        <van-tabs color="#FCC541" v-model="active">
          <van-tab title="商品" to="/main/goods"></van-tab>
          <van-tab title="评价" to="/main/evaluate"></van-tab>
          <van-tab title="商家" to="/main/merchant"></van-tab>
        </van-tabs>
      </div>
      <!-- 二级路由的出口 -->
      <router-view />
    </div>


    <!-- 弹出层 -->
    <van-popup v-model="showshopcar" position="bottom" style="height:40%">
     
    </van-popup>
    <!-- 底部的黑条 -->
    <div class="main-footer" @click="showshopcar = !showshopcar"></div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { $_seller } from "@/api/order";

//商家数据约束
interface IShopdata {
  avatar?: string; //头像
  bulletin?: string; //店铺公告
  date?: Array<string>; //营业时间
  deliveryPrice?: number; //配送价格
  deliveryTime?: number; //配送时间
  description?: string; //配送方描述
  id?: number; //店铺id
  minPrice?: number; //最小配送费
  name?: string; //店铺名称
  pics?: Array<string>; //店铺图片墙
  score?: number; //评分
  sellCount?: number; //销售数量
  supports?: Array<string>; //目前的活动
}

@Component
export default class Main extends Vue {
  active: number = 0; //选项卡激活的索引
  shopdata: IShopdata = {}; //当前店铺数据,标准格式
  showoverlay: boolean = false; //是否显示店铺蒙层
  showshopcar: boolean = false; //是否显式购物车弹出层



  created(): void {
    $_seller().then((res) => {
      this.shopdata = res.data.data; //这里注意，TS的数据对象应该使用interface进行属性约束
      console.log(res);
    });
  }
}
</script>

<style scoped lang="scss">
.van-overlay{
  z-index: 2;
}

.main-container {
  height: 100%;

  .main-header {
    height: 200px;
    position: relative;

    .main-header-top {
      height: 100%;
      width: 100%;
      filter: blur(2px);

      img {
        width: 100%;
        height: 100%;
      }
    }

    .main-header-bottom {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 100px;
      background-color: #fff;
      width: 100%;
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;

      h3{
        margin: 10px;
      }

      img{
        position: absolute;
        right: 10px;
        top: -20px;
        border-radius: 10px;
      }
    }

    img {
      width: 80px;
      height: 80px;
    }
  }

  .main-body {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .main-footer {
    z-index: 999999;
    position: fixed;
    width: 100%;
    height: 60px;
    background-color: #000;
    border-radius: 35px;
    bottom: 10px;
  }
}
</style>